<template>
  <div>
    <!-- head -->
    <qy-navigations></qy-navigations>
    <!-- content -->
    <div class="content qy-box-space">
      <div class="content-box" v-for="(itemArr,indexArr) in listData" :key="indexArr" >
        <div class="content-box_row_tab" >
          <div>
            <i class="el-icon-s-unfold"></i> 
            <span v-if="itemArr.type == 'video'" >视频</span>
            <span v-else-if="itemArr.type == 'sound'" >音频</span>
            <span v-else-if="itemArr.type == 'text'" >文本</span>
            <span v-else-if="itemArr.type == 'img'" >画作</span>
            <span v-else-if="itemArr.type == 'code'" >程序</span>
          </div>
          <div class="content-box_row_tab_more" @click="Controller('list',itemArr.type)" >查看更多</div>
        </div>
        <div class="content-box_row_con qy-scroll-x" >
          <div v-for="(item,index) in itemArr.content" :key="index" >
            <div class="content-box_row_con_card" @click="Controller('link',itemArr.type,item.url,item.showType)" >
              <!-- 可预览图片 -->
              <el-image 
                v-if="itemArr.type == 'img'"
                style="width: 100%; height: 100%"
                :src="item.cover" 
                fit="cover"
                :preview-src-list="srcList">
              </el-image>
              <!-- 普通封面 -->
              <img v-if="itemArr.type != 'img'" :src="item.cover" alt="">
              <div>{{item.title}}</div>
              <div class="qy-font-limits" >{{item.desc}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Request from '@/server/http'
import Api from '@/server/api'
export default {
  name: "personspaceWorks",
  data() {
    return {
      //参数
      listData:[],
      //图片预览列表
      srcList: []
    };
  },
  methods: {
    // get init data
    initData() {
      Request
        .requestPost('', Api.apiPersonSpace.worksHome)
        .then((res) => {
          console.log(res)
          this.listData= res.data.data
          for(const item in this.listData){
            if(this.listData[item].type == 'img'){
              this.listData[item].content.map((item)=>{
                this.srcList.push(item.cover)
              })
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // controller
    Controller(name,param1,param2,param3) {
      switch (name) {
        case "link":
          if(param1 == 'video'){
            this.$router.push({path:'/personspace/videoplayer',query:{src:encodeURI(param2)}})
          }else if(param1 == 'code'){
            window.open('/personspace/codeplayer?showType='+param3+'&src='+encodeURI(param2))
            //this.$router.push({path:'/works/codeplayer',query:{showType:param3,src:encodeURI(param2)}})
          }else if(param1 == 'text'){
            this.$router.push({path:'/personspace/book/read',query:{src:encodeURI(param2)}})
          }else if(param1 == 'sound'){
            this.$router.push({path:'/personspace/soundplayer',query:{src:encodeURI(param2)}})
          }
          break;
        case 'list': 
          if(param1 == 'text'){
            this.$router.push({path:'/personspace/book/book',query:{type:param1}})
          }else{
            this.$router.push({path:'/personspace/worksList',query:{type:param1}})
          }
        break;
        default:
          break;
      }
    },
  },
  mounted() {
    this.initData();
  }
};
</script>
<style scoped lang="scss">
@import "@/styles/variable.scss";
//自定义变量
//content
.content {
  display: flex;
  flex-direction: column;
  background-color: white;
  border: 1px solid $sidebar-border;
  
  .content-box{
    display: flex;
    flex-direction: column;
    .content-box_row_tab{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      background-color: $sidebar-border;
      padding: 10px 20px;
      color: #666666;
      cursor: pointer;
      .content-box_row_tab_more:hover{
        color: #cccccc;
      }
    }
    .content-box_row_con{
      padding:20px 0 80px 20px ;
      display: flex;
      flex-direction: row;
      .content-box_row_con_card{
        margin-right: 25px;
        width: 110px;
        height: 140px;
        text-align: left;
        font-size: 12px;
        color: $gray-weight;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
          border-radius: 4px;
          object-fit: cover;
        }
        .play-icon{
          position: absolute;
          z-index: 100;
          font-size: 50px;
          color: white;
          margin-top: -180px;
          margin-left: 50px;
        }
        .play-icon:hover{
          color: #cccccc;
        }
      }
      .content-box_row_con_card:hover{
        color: $blue-weight;
      }
    }
  }
}

</style>
